<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="mui.min.js"></script>
    <link href="mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-slider img{
    		height: 200px;
    	}
    	
    </style>
</head>
<body>
	 <header class="mui-bar mui-bar-nav">
	 	<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	  <h1 class="mui-title" style="color: red;font-size: 25px;">e超市</h1>
	  </header>
	   <nav class="mui-bar mui-bar-tab">
    	<a href="#shouye" class="mui-tab-item mui-active" id="shouye">
    		<span class="mui-icon mui-icon-home"></span>
    		<span class="mui-tab-lable">首页</span>
    	</a>
    	<a href="" class="mui-tab-item">
    		<span class="mui-icon mui-icon-list"></span>
    		<span class="mui-tab-lable">分类</span>
    	</a>
    	<a href="" class="mui-tab-item">
    		<span class="mui-icon mui-icon-chatbubble"></span>
    		<span class="mui-tab-lable">会话</span>
    	</a>
    	<a href="#" class="mui-tab-item"  id="logoin">
    		<span class="mui-icon mui-icon-person"></span>
    		<span class="mui-tab-lable">我的</span>
    	</a>
    </nav>
    
     
    <div class="mui-slider " style="width: auto;height: 200px;" id="pullRefresh">
                     <div class="mui-slider-group mui-slider-loop">
                     	<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="5.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#" id="img1"><img src="1.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="5.jpg" /></a></div>

                           <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
                     </div>
                     <div class="mui-slider-indicator" style="color: wheat;">
                     	<div class="mui-indicator mui-active"></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     </div>
                  </div>
                  <ul class="mui-table-view mui-grid-view mui-grid-9">
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 80px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				e保健
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 91px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-navigate" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				医疗健康
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 91px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-navigate" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				医药建康
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 95px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				面部护理
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 80px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				e到家
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 85px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				山姆店
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 95px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				清洁用品
                			</div>
                		</a>
                	</li>
                	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2" 
                		style="font-size: 11px;width: 95px;height: 90px;">
                		<a href="">
                			<span class="mui-icon mui-icon-home" style="background-color: green;padding: 7px;border-radius: 10px;color: white;"></span>
                			<div class="mui-media-body">
                				厨房电器
                			</div>
                		</a>
                	</li>
                </ul>
                <div style="height: 230px;padding:10px">
                	<p style="font-size:18px;color:red">今/日/必/抢</p>
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="10.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="11.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="12.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                </div>
                 <div style="height: 230px;padding:10px">
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="10.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="11.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                	<div style="float:left;width:110px;height:260px;background-color:white;padding:5px">
                	     <img src="12.jpg" alt="" style="width:110px;height:120px"/>
                	     <p style="color:black">【e超市】olay玉兰油  洁净....</p>
                	     <p style="color:red">￥49.9</p>
                	</div>
                </div>
                
             
</body>
<script src="logoin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	mui.init({
				
			});
			
mui('.mui-off-canvas-wrap').offCanvas('show');
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});


</script>
</html>